import './App.css';
import Calculator from './components/Calculator';
import Clock from './components/Clock';
import LoginControl from './components/LoginControl';
import MyComp from './components/MyComp';
import MyComponent from './components/MyComponent';
import NameForm from './components/NameForm';
import NumberList from './components/NumberList';
import Reservation from './components/Reservation';
import ShoppingList from './components/ShoppingList';
import Toggle from './components/Toggle';
import logo from './logo.svg';

function App() {

  const numbers = [1, 2, 3, 4, 5];

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>Hello React</h1>
      </header>
      <div className="App-body">
        <MyComp />
        <ShoppingList name="FaceBook" />
        <Clock />
        <Toggle />
        <LoginControl />
        <NumberList numbers = {numbers} />
        <NameForm />
        <Reservation />
        <Calculator />
        <MyComponent />
      </div>
    </div>
  );
}

export default App;
